<template>
  <!-- swiper部分 -->
  <div class="swiperBox">
    <van-swipe class="my-swipe" :autoplay="2000" :duration='1000' indicator-color="white">

      <van-swipe-item
        v-for="item in bannerList"
        :key="item.bannerid" >
        <van-image class="img" :src="item.img"></van-image>
      </van-swipe-item>
  
    </van-swipe>
    <!-- 后面的定位背景 -->
    <p class="bgc"></p>
  </div>



</template>
<script setup lang="ts">
import { bannerListApi } from '@/api/banner'

import { ref, onMounted } from 'vue';

//导入数据类型限制
import type { MyBannerItem } from '@/config/interface'

const bannerList = ref<MyBannerItem[]>([])

onMounted( 
  async () => {
    //获取轮播图数据
    const res = await bannerListApi()
    // console.log(res);
    
    bannerList.value = res.data
  }
)


  

</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
height: 140px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.swiperBox {
  height: 130px;
  position: relative;
  padding: 20px;
  z-index: 500;
margin-bottom: 30px;
  >.my-swipe {
    border-radius: 10px;
  }
}
.van-swipe-item{
    width: 353px;
    >.img{
   width: 100%; 
  }
}

.bgc {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #c72418;
    z-index: -100;

  width: 100%;
  height: 150px;
  border-radius: 0 0 200px 200px/ 0 0 40px 40px;
}
</style>